<template>
  <div>
    <div
      v-if="activeTab!=3"
      class="warn-box"
    >
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p> 请确保提交的商品符合国家法律法规，不得包含违禁商品。平台将随时进行抽审，一经发现，将对商品和店铺进行处理，严重将追究法律责任。</p>
    </div>
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.goods_name"
            @keyup.enter.native="search"
            placeholder="请输入商品名称"
            clearable
          />
        </el-form-item>
        <template v-if="activeTab!=3">
          <el-form-item label="商品品类">
            <el-select
              v-model="searchForm.cate_id"
              placeholder="请选择商品品类"
              clearable
            >
              <el-option
                v-for="item in categoryList"
                :key="item.category_id"
                :label="item.name"
                :value="item.category_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁方式">
            <el-select
              v-model="searchForm.rent_type"
              placeholder="请选择"
              clearable
            >
              <el-option
                label="随租随还"
                :value="3"
              />
              <el-option
                label="固定租期"
                :value="1"
              />
              <el-option
                label="租完即送"
                :value="2"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <my-date-picker ref="myDatePicker" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="审核类型">
            <el-select
              v-model="searchForm.check_type"
              placeholder="全部"
              clearable
            >
              <el-option
                label="商品审核"
                :value="1"
              />
              <el-option
                label="下架审核"
                :value="2"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select
              v-model="searchForm.check_status"
              placeholder="全部"
              clearable
            >
              <el-option
                label="未审核"
                :value="1"
              />
              <el-option
                label="审核未通过"
                :value="2"
              />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')&&activeTab!=3"
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        @click="$router.push({name: 'goodsAdd'})"
      >发布商品</el-button>
    </div>
    <el-table
      v-show="tableData.length > -1"
      :data="tableData"
      border
    >
      <el-table-column
        align="center"
        label="商品信息"
        width="300"
      >
        <template slot-scope="scope">
          <div class="flex align-center goods_info">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.imgurl?$globalObj.imgBaseUrl+scope.row.imgurl:''"
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
            <div class="flex-1 text-left info">
              <p class="activity">{{ scope.row.id }}
                <span
                  v-for="(item, index) in scope.row.activity"
                  :key="index"
                  class="inline-block vertical-middle"
                >
                  <el-popover
                    placement="top-start"
                    width="160"
                    trigger="hover"
                    content="商城商品推荐"
                  >
                    <img
                      v-if="item.activity_img"
                      slot="reference"
                      class="w-100 h-100"
                      :src="$globalObj.imgApiUrl+item.activity_img"
                      :alt="item.activity_title"
                    >
                  </el-popover>
                </span>
              </p>
              <p>{{ scope.row.title }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        width="100"
        prop="pact_type"
        label="租赁方式"
      /> -->
      <el-table-column
        align="center"
        width="100"
        prop="rent_type"
        label="租期类型"
      />
      <el-table-column
        align="center"
        width="120"
        label="库存"
      >
        <template slot-scope="scope">
          <p>
            <el-popover
              v-if="activeTab!=3"
              placement="top-start"
              width="160"
              trigger="hover"
              content="商品套餐库存不足"
            >
              <span
                v-if="scope.row.is_lack"
                slot="reference"
                style="margin-right:5px"
                class="vertical-middle"
              ><i
                class="el-icon-warning warning-font"
                style="font-size:18px"
              /></span>
            </el-popover>
            {{ scope.row.stock }}
          </p>
          <el-button
            v-if="$hasMethod('#editStock')&&activeTab!=3"
            type="text"
            style="padding: 0;"
            @click="editStock(scope.row.id)"
          >修改库存</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="cate_name"
        label="品类"
      />
      <el-table-column
        align="center"
        prop="create_time"
        label="创建时间"
        width="100"
      />
      <el-table-column
        v-if="activeTab!=3"
        align="center"
        prop="status"
        width="200"
      >
        <template slot="header">
          <span v-if="activeTab==1">状态</span>
          <el-popover
            v-else
            placement="top"
            width="250"
            trigger="hover"
          >
            <div class="color-666">
              <p style="font-size:12px"><span class="color-333 bold-font">商家下架：</span>商家手动下架商品状态。</p>
              <p style="font-size:12px"><span class="color-333 bold-font">违规下架：</span>商品存在违规信息，需要编辑后提交审核才可上架。</p>
              <p style="font-size:12px"><span class="color-333 bold-font">已审核：</span>商品可随时进行上架处理。</p>
              <p style="font-size:12px"><span class="color-333 bold-font">未提审：</span>商品编辑信息后需要提交审核。</p>
            </div>
            <span slot="reference">状态</span>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 1 ? 'success' : scope.row.status == 3 ? 'warning' : 'danger'">{{ scope.row.status == 1 ? "已上架" : scope.row.status == 3 ? "申请下架" : scope.row.status == 4 ? "申请下架拒绝" : scope.row.status == 2 ? "商家下架" : "违规下架" }}</el-tag>
          <el-tag
            v-if="activeTab==2"
            style="margin-left:10px"
            :type="scope.row.ischeck == 4 ? 'success' : 'danger'"
          >{{ scope.row.ischeck_name }}</el-tag>
        </template>
      </el-table-column>
      <template v-if="activeTab==3">
        <el-table-column
          align="center"
          prop="status_name"
          label="审核后商品状态"
        />
        <el-table-column
          align="center"
          label="审核状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.check_status == 1 ? '' : 'danger'">{{ scope.row.check_status_name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="check_type_name"
          label="审核类型"
        />
      </template>
      <el-table-column
        v-if="activeTab!=1"
        align="center"
        label="原因"
      >
        <template slot-scope="scope">
          <p>{{ scope.row.check_reason||"" }}</p>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="300"
      >
        <template slot-scope="scope">
          <el-dropdown
            v-if="$hasMethod('#edit')&&(activeTab==2||(activeTab==3&&scope.row.check_type==1))"
            style="margin-right:10px"
            @command="command=>handleCommand(command,scope.row.id)"
          >
            <el-button
              type="primary"
              size="mini"
            >编辑<i class="el-icon-arrow-down el-icon--right" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">商品信息</el-dropdown-item>
              <el-dropdown-item command="2">套餐信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button
            v-if="$hasMethod('#submit')&&((activeTab==2&&scope.row.check_status==2&&scope.row.check_type==2)||(activeTab==3&&scope.row.check_type==2&&scope.row.status==4))"
            type="primary"
            size="mini"
            @click="submitAudit(scope.row.id)"
          >重新提交</el-button>
          <el-button
            v-if="$hasMethod('#enable')&&activeTab!=3&&(scope.row.status==2||scope.row.status==5)&&scope.row.ischeck==4"
            type="warning"
            size="mini"
            @click="changeStatus(scope.row.id, scope.row.status, scope.row.activity && scope.row.activity.length > 0)"
          >上架</el-button>
          <el-button
            v-if="$hasMethod('#enable')&&activeTab!=3&&scope.row.status==1"
            type="warning"
            size="mini"
            @click="changeStatus(scope.row.id, scope.row.status, scope.row.activity && scope.row.activity.length > 0)"
          >下架</el-button>
          <el-button
            v-if="$hasMethod('#audit')&&activeTab==2&&scope.row.ischeck!=4"
            type="warning"
            size="mini"
            @click="submitAudit(scope.row.id)"
          >提交审核</el-button>
          <el-button
            v-if="$hasMethod('#view')"
            type="primary"
            size="mini"
            @click="view(scope.row.id)"
          >查看</el-button>
          <el-button
            v-if="$hasMethod('#delete')&&activeTab==2"
            type="danger"
            size="mini"
            @click="removeItem(scope.row.id)"
          >删除</el-button>
          <el-button
            v-if="$hasMethod('#cancel')&&activeTab==3&&(scope.row.ischeck==3||scope.row.status==3)"
            type="danger"
            size="mini"
            @click="cancelAudit(scope.row.id, scope.row.check_type)"
          >取消</el-button>
          <el-button
            v-if="activeTab==1"
            type="text"
            @click="share(scope.row.id)"
          >分享链接</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    />
    <stock-dialog
      ref="stockDialog"
      @getList="getList"
    />
    <share-dialog ref="shareDialog" />
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import stockDialog from '../components/stock'
import shareDialog from '../components/share'
import myDatePicker from '@/components/myDatePicker'
import { getGoodsList, getShopCategory, goodsGrounding, itemDownShelf, deleteGoods, goodsSubmitReview, goodsCancelReview } from '@/api/goods'
export default {
  components: { customPage, stockDialog, shareDialog, myDatePicker },
  props: ['activeTab', 'tabCount'],
  data() {
    return {
      searchForm: {
        goods_name: '',
        cate_id: null,
        rent_type: null,
        create_time: '',
        check_type: '',
        check_status: ''
      },
      total: 0,
      tableData: [],
      categoryList: []
    }
  },
  watch: {
    activeTab(val) {
      // 切换tab，重新获取列表
      this.$refs.customPage.page = 1
      this.reset()
    }
  },
  mounted() {
    this.getSelectList()
    this.getList()
  },
  methods: {
    view(goodsId) {
      this.$router.push({ name: 'goodsView', params: { goodsId }})
    },
    // 分享
    share(id) {
      this.$refs.shareDialog.goodsId = id
      this.$refs.shareDialog.dialogVisible = true
    },
    // 审核取消
    cancelAudit(id, type) {
      let tip = ''; let title = ''
      if (type == 1) {
        tip = '取消商品审核后，审核中的商品将保存到商品草稿箱，确认要取消商品审核吗？'
        title = '取消商品审核'
      } else {
        tip = '取消下架审核后，将撤回下架审核申请，确认要取消商品审核吗？'
        title = '取消下架审核'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        goodsCancelReview(id).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 提交审核
    submitAudit(id) {
      this.$confirm('该商品未提审，确定提交审核？', '提交审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        if (this.activeTab == 3) {
          itemDownShelf(id).then(res => {
            this.getList(true)
          })
        } else {
          goodsSubmitReview(id).then(res => {
            this.getList(true)
          })
        }
      })
    },
    handleCommand(command, goodsId) {
      if (command == 1) {
        this.$router.push({ name: 'goodsBaseEdit', params: { goodsId }})
      } else {
        this.$router.push({ name: 'goodsMealInfo', params: { goodsId }})
      }
    },
    // 更改库存
    editStock(id) {
      this.$refs.stockDialog.editId = id
      this.$refs.stockDialog.dialogVisible = true
    },
    // 上架/下架
    changeStatus(id, status, flag) {
      let tip = ''; let title = ''
      if (status == 1 && flag) {
        tip = '该商品参与平台推荐活动，下架需通过平台审核。您确定要下架商品吗？'
        title = '下架'
      } if (status == 1) {
        tip = '您确定要下架商品吗？'
        title = '下架'
      } else {
        tip = '您确定要上架商品吗？'
        title = '上架'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        if (status == 1) {
          itemDownShelf(id).then(res => {
            this.getList(true)
          })
        } else {
          goodsGrounding(id).then(res => {
            this.getList(true)
          })
        }
      }).catch(() => { })
    },
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteGoods(id).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 查询
    search() {
      if (this.activeTab != 3) {
        const pickerVal = this.$refs.myDatePicker.getVal()
        if (pickerVal !== 'error') {
          this.searchForm.create_time = pickerVal
          this.$refs.customPage.page = 1
          this.getList()
        }
      } else {
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        goods_name: '',
        cate_id: null,
        rent_type: null,
        create_time: '',
        check_type: '',
        check_status: ''
      }
      this.getList()
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      getGoodsList({
        page,
        pageSize,
        ...this.searchForm,
        goods_status: this.activeTab
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
        for (const key in this.tabCount) {
          this.tabCount[key] = res.count[key]
        }
      })
    },
    getSelectList() {
      getShopCategory().then(res => {
        this.categoryList = res || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_info {
  .info {
    margin-left: 10px;
    p {
      color: #666666;
    }
    p:first-child {
      color: #999999;
    }
  }
}
.activity {
  line-height: 24px;
  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}
</style>
